<template>
	<view class="chart-iframe">
		<view class="iframe-title">
			<view class="title-left">
				{{data_str}}
			</view>
			<view :prop="data_name" :change:prop="echarts.updateEcharts"></view>
			<view :prop="mockData" :change:prop="echarts.updateEcharts"></view>
			<view class="title-right">
				<picker :value="index" :range="array_str" @change="onPickerChange" :prop="index" :change:prop="echarts.updateEcharts">
					<view class="uni-input">{{array_str[index]}}</view>
				</picker>
			</view>
		</view>
		<view class="iframe-blocks">
			<canvas id="myEcharts"></canvas>
		</view>
	</view>
</template>
<script>
	let pageApp = getApp();
	export default {
		data() {
			return {
				data_str: "",
				item_title: [],
				mockData: {},
				index: 0,
				array_str: ["柱状", "折线", "饼状"],
				data_name: ""
			}
		},
		onLoad: function(options) {
			let _id = options.id;
			this.data_name = 's' + _id;
			this.mockData = this.report.rptData
			this.getListById(this.mockData);
		},
		methods: {
			onPickerChange(e) {
				this.index = e.target.value
			},
			getListById(d) {
				this.item_title = d.data.data[0];
				this.data_str = this.item_title[this.data_name] + "数据";
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		data: function() {
			return {
				array_val: ["bar", "line", "pie"],
				init_val: "bar",
				rpt_data: {}
			}
		},
		mounted() {
			// console.log("ok", this.mockData)
			this.rpt_data = this.mockData.data;
			if (typeof window.echarts === 'function') {
				this.initEcharts();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				script.src = 'static/js/echarts.min.js';
				script.onload = this.initEcharts.bind(this);
				document.head.appendChild(script);

				// 动态引入图片绘制库
				const vj = document.createElement('script');
				vj.src = 'static/js/echarts.vj.js';
				document.head.appendChild(vj);
			}
		},
		methods: {
			initEcharts() {
				loadEchart('myEcharts', {
					type: this.init_val
				})(this.rpt_data, {
					category: 's1',
					value: this.data_name
				});
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				this.init_val = this.array_val[newValue];
				this.initEcharts();
			},
		}
	}
</script>

<style>
	page {
		background-color: #F1F5F6;
	}

	.chart-iframe {
		margin: 20rpx 0;
	}

	.iframe-title {
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.iframe-blocks {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.iframe-blocks canvas {
		width: 690rpx;
		height: 690rpx;
	}
</style>
